<template>
	<view class="padding-lr15">
		<uni-header></uni-header>
		<view class="padding-tb10"></view>
		<view class="bg-shadow-0 padding-lr15 b-radius-5">
			<view class="flex f-a-c b-bottom-b h-44">
				<text class="f16-size f-w-500">Address</text>
			</view>
			<view v-if="user != '' && user.password" class="padding-tb10 t-color-r f12-size">
				The system has automatically registered an account for you using your email, and the password is: {{user.password}}
			</view>
			<view v-if="address == ''" @click="$refs.cAddress.open()" class="flex h-36 f-a-c f-j-c b-radius-5 b-color-3 f-w-500  margin-t10">
				<text>Add New Address</text>
			</view>
			<view v-else class="padding-10 b-color-e margin-t10">
				<view>{{address.address1+address.address2}}</view>
				<view class="flex f-a-c f12-size">
					<text class="margin-r12">{{address.full_name}}</text>
					<text class="margin-r12">{{address.email}}</text>
				</view>
				<view class="flex f-a-c f12-size">
					<text class="margin-r12">{{address.country}}</text>
					<text class="margin-r12">{{address.city}}</text>
					<text class="margin-r12">{{address.zone}}</text>
					
				</view>
				<view class="flex f-a-c f-j-s">
					<view class="flex f-a-c">
						<view class="choose on margin-r10"></view>
						<text class="f-w-500">Choosed</text>
					</view>
					<view @click="$refs.cAddress.open(address)" class="flex f-a-c f-j-c h-30 b-radius-2 padding-lr12 b-color-3">Edit</view>
				</view>
			</view>
			
			<view class="flex f-a-c b-bottom-b h-44">
				<text class="f16-size f-w-500">Payment Method</text>
			</view>
			<view class="padding-10 b-color-e flex f-a-c margin-t10">
				<view class="choose on flex f-s-0"></view>
				<view class="flex f-a-c f-s-0 w-80 f-j-e">
					<image class="h-16" src="../../static/images/PayPal.png" mode="heightFix"></image>
				</view>
				<view class="flex flex-1 f-c padding-lr12 f-j-c">
					<view class="f-w-500">PayPal</view>
					<view class="margin-t10 t-color-9">PayPal</view>
				</view>
			</view>
			
			<view class="flex f-a-c b-bottom-b h-44">
				<text class="f16-size f-w-500">Delivery Method</text>
			</view>
			<view class="padding-10 b-color-e flex f-a-c margin-t10">
				<view class="choose on flex f-s-0"></view>
				<view class="flex f-a-c f-s-0 w-80 f-j-c">
					<image class="h-50" src="../../static/images/wuliu.png" mode="heightFix"></image>
				</view>
				<view class="flex flex-1 f-c padding-lr12 f-j-c">
					<view class="f-w-500">Flat Rate Shipping</view>
					<view class="margin-t10 t-color-9">Fixed shipping fee by order total</view>
				</view>
			</view>
			<view class="flex f-a-c b-bottom-b h-44">
				<text class="f16-size f-w-500">Comment</text>
			</view>
			<view class="padding-10 b-color-e margin-t10">
				<textarea class="w100 h-80" value="" placeholder="Comment" />
			</view>
			<view class="padding-tb6"></view>
		</view>
		
		<b-button class="">
			<view class="flex f-a-c f-j-s ">
				<view class="flex f-a-c">
					<text class="margin-r2">Total:</text>
					<text class="text-price f16-size f-w-500">{{amount*num | price}}</text>
				</view>
				<view @click="submit" class="bg-color-0 flex f-a-c f-j-c h-36 t-color-w padding-lr12">
					<text>Submit Order</text>
				</view>
			</view>
		</b-button>
		
		<cAddress ref="cAddress" @onChange="getAddress"></cAddress>
		
	</view>
</template>
<style scoped>
</style>
<script>
	import cAddress from './components/address.vue';
	const $ = require('@/utils/api.js');
	let self = this;
	export default {
		components: {cAddress},
		data() {
			return {
				address: '',
				id: '',
				num: 1,
				amount: 0,
				user: ''
			};
		},
		onLoad: function(options) {
			self = this;
			this.id = options.id ? options.id : '';
			this.num = options.num ? options.num : '';
			this.amount = options.amount ? options.amount : '';
			this.init();
		},
		onShow() {
		},
		methods: {
			getAddress(e) {
				let token = uni.getStorageSync('token') || '';
				if(token == ''){return}
				if(e) {
					this.user = e;
				}
				$.ajax({
					url: '/v1/tk_shop/user/address/list',
					data: {
						page: 1,
						page_size: 1,
					},
					method: 'POST',
					isNoLogin: true,
					success(res) {
						let list = res.data.list;
						self.address = list[0] ? list[0]: '';
					}
				})
			},
			submit() {
				if(this.address == ''){
					$.$toast('Address not empy');
					return
				}
				let info = uni.getStorageSync('orderInfo') ? uni.getStorageSync('orderInfo') : {};
				$.ajax({
					url: '/v1/tk_shop/user/order',
					data: {
						address_id: this.address.id,
						goods_id: Number(this.id),
						number: Number(this.num),
						...info
					},
					loading:true,
					method: 'POST',
					success(res) {
						self.go('/pages/index/orderPay?id='+res.data.order_id+'&amount='+self.amount*self.num,2)
					}
				})
			},
			init() {
				this.getAddress();
			},
		},
		computed: {},
		created() {
		},
		mounted() {},
		destroyed() {},
		onPullDownRefresh() {
		},
		onReachBottom() {
			
		}
	}
</script>